<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/chivoxsdk.css">
    <link rel="stylesheet" href="assets/css/chivox-example.css">
    <style>
        #changeParams input,#changeParams select{
            width: 173px;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <p class="navbar-text">CHIVOX API JSSDK</p>
                <ul class="nav nav-pills">
                    <li><a href="index.html">首页</a></li>
                    <li><hr/></li>
                    <li class="active"><a href="index.html">基础应用场景</a></li>
                    <li><hr/></li>
                    <li><a href="player_tts.html">音频合成</a></li>
                    <li><hr/></li>
                    <li><a target="_blank" href="../doc/index.html">SDK接口文档</a></li>
                </ul>
            </div>
            <div class="content">
                <div class="chivoxpanel">
                    <div class="list">
                        <img class="icon" src="assets/img/eval.png"></img>
                        <p class="title">基础应用场景</p>
                        <ul>
                            <li ><a href="index.html">英文句子评测</a></li>
                            <li><a href="player_tts.html">音频合成</a></li>
                            <li class="active"> <a href="aiPanel.html">aiPanel</a></li>
                            <li> <a href="en_pred_exam.html">en_pred_exam</a></li>
                        </ul>
                    </div>
                    <div class="mainarea">
                        <p class="title">英文句子评测</p>
                        <textarea name="refText" id="currentWord" cols="90" rows="4"></textarea>
                        <div id="changeParams" style="line-height: 60px;">
                            <div>
                                coreType:<select name="coreTypes" id="coreType">
                                <!--<option value ="volvo"></option>-->
                            </select>
                                res:<select name="ress" id="res"></select>
                                userId: <input id="userId" type="text" value="chivox tester">
                            </div>

                        </div>
                        <div id="aiPanel" class="aiPanel">
                            <div>
                                <button class="play playOff"></button>
                                <button class="record recordOff"></button>
                                <button class="replay replayOff"></button>
                                <button class="changeWordButton">换个句子</button>
                                <div class="recordProgressBar"><div class="value"></div></div>
                            </div>
                            <div id="chivox-recorder"></div>
                        </div>
                        <!--  设置回放音量：<input type="range" min="0" max="100" id="inputButton">
                          获取录音音量：<input type="range" min="0" max="100" id="getMicButton">
                          设置录音音量：<input type="range" min="0" max="100" id="setMicButton">-->
                        <p class="scoreTitle">得分情况</p>
                        <p id="scoreResult">
                            发音得分：<span class="pron"></span>
                            <br/>
                            流利度：<span class="fluency"></span>
                            <br/>
                            详细得分：<span class="details"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../chivox.min.js"></script>
<script>
    $(function () {
        var config = getConfig();
        var coreTypeD = null;
        if(Object.keys(config).length >0){
            coreTypeD = Object.keys(config);
            setConfig(coreTypeD,"#coreType");
            setConfig(config[$("#coreType").val()].res,"#res");
        }

        $("#changeParams #coreType").on("change input",function () {
            setConfig(config[$("#coreType").val()].res,"#res");
        });

        $("#currentWord").val("I want to know the past and present of Hong Kong.");

        var aipanel = new AiPanel(
            {
                appKey: '14255202120000cf',
                sigurl: '../php/sig.php',
                playDing: true,
                data: {
                    playPosition: 1000,
                    playDuration: 2000,
                    audioUrl: "/static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3", //音频URL
                    serverParams: {
                        coreType:  $("#coreType").val(),
                        refText:$("#currentWord").val(),
                        rank: 100,
                        userId: "chivox tester"
                    }
                },
                onInit: function onInit(errno) {
                    aipanel.showVolumeBar();
                    console.info('[ onInit ]:', errno);
                },
                onInitSuccess: function onInitSuccess() {
                    console.log("onInitSuccess");
                },
                onError: function onError(err) {
                    console.info('[ onError ]:', err);
                },
                onBeforeRecord: function onBeforeRecord() {
                    $("#scoreResult .pron").empty();
                    $("#scoreResult .fluency").empty();
                    $("#scoreResult .details").empty();
                },
                onRecordIdGenerated:function (id) {
                    console.log("=============onRecordIdGenerated start=============");
                    console.log(JSON.stringify(id));
                    console.log("=============onRecordIdGenerated end=============");
                },
                onAfterRecord:function(){
                    console.log("onAfterRecord")
                },
                onScore: function onScore(data) {

                    $("<pre>").text(JSON.stringify(data,null, 4)).appendTo("#scoreResult .details");

                },
                onInternalScore:function(data){
                    console.log(data);

                },
                onScoreError: function onScoreError(errorType) {
                    //评分失败的显示 "TIMEOUT", "NO_DATA", ErrorID
                    $("<pre>").text(JSON.stringify(errorType,null, 4)).appendTo("#scoreResult .details");
                },
                onBeforePlay:function(){
                    console.log("onBeforePlay")
                },
                onAfterPlay:function(){
                    console.log("onAfterPlay");
                },
                onBeforeReplay:function(){
                    console.log("onBeforeReplay")
                },
                onAfterReplay: function onAfterReplay() {
                    console.log("onAfterReplay");
                }
            }
        );

        $("#currentWord").get(0).addEventListener("input",function () {
            console.log("change");
            aipanel.setData({
                playPosition: 0,
                playDuration: 6000,
                audioUrl: "/static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3", //音频URL
                serverParams: {
                    coreType:  $("#coreType").val(),
                    refText:$("#currentWord").val(),
                    rank: 100,
                    userId: "tester"
                }
            })
        });

        $(".changeWordButton").bind("click",function () {
            console.log(aipanel);
            aipanel.dispose();
            console.log(aipanel);
            aipanel = null;
            console.log(aipanel)
        });

        function getConfig() {
            var data = null;
            $.ajax({
                url: "./config/config.json",
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (result) {
                    data = result;
                    console.log(result)
                },
                error:function(err) {
                    alert("get config.json  fail:"+err)
                }
            });
            return data;
        }

        function setConfig(data,doms) {
            var str = "";
            if(data){
                for (var i = 0;i<data.length;i++){
                    str+="<option value ="+data[i]+">"+data[i]+"</option>"
                }
            }
            $(doms).html(str);
        }
    })
</script>
</body>
</html>